export default Login;

signup.js

Add Code

import React from 'react';

function Signup() {

return (

<div className="App">

Sign up

</div>

);

}

export default Signup;

We will later revisit the above components and implement them in greater detail.

Next in App.js, import the newly created components:

Modify Bold Code

import React from 'react';

import { Switch, Route, Link } from 'react-router-dom';

import 'bootstrap/dist/css/bootstrap.min.css';

import AddTodo from './components/add-todo';

import TodosList from './components/todos-list';

import Login from './components/login';

import Signup from './components/signup';

function App() {

return (

<div className="App">

Hello World

</div>

);

}

export default App;

React-Bootstrap Navbar Component

Next, we will grab a navbar component from React-Bootstrap (https://react-bootstrap.github.io/components/navbar/

fig. 2)

Figure 2

Paste the markup into App.js by adding the following codes:

Modify Bold Code

…

import Signup from './components/signup';

import Nav from 'react-bootstrap/Nav';

import Navbar from 'react-bootstrap/Navbar';

function App() {

return (

<div className="App">

<Navbar bg="primary" variant="dark">

<div className="container-fluid">

<Navbar.Brand>React-bootstrap</Navbar.Brand>

<Nav className="me-auto">

<Nav.Link href="#home">Home</Nav.Link>

<Nav.Link href="#link">Link</Nav.Link>

</Nav>

</div>

</Navbar>

</div>

);